<template>
	<view class="confirm-container">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="navbar-content"
				:style="{ height: navBarHeight + 'px', paddingRight: menuButtonInfo.width + menuButtonInfo.right - windowWidth + 10 + 'px' }">
				<view class="back-btn" @tap.stop="goBack">
					<u-icon name="arrow-left" size="20" color="#fff"></u-icon>
				</view>
				<view class="navbar-title">
					<text class="title-text">确认订单</text>
				</view>
			</view>
		</view>

		<!-- 收货地址 -->
		<view class="card-container" @click="selectAddress">
			<view v-if="selectedAddress" class="address-info">
				<view class="address-user">
					<u-icon name="map" size="16" color="#27B387" style="margin-right: 10rpx;"></u-icon>
					<text class="name">{{ selectedAddress.name }}</text>
					<text class="phone">{{ selectedAddress.phone }}</text>
				</view>
				<view class="address-detail">
					<text class="detail">{{ selectedAddress.detail }}</text>
					<u-icon name="arrow-right" size="14" color="#999"></u-icon>
				</view>
			</view>
			<view v-else class="no-address">
				<view class="no-address-left">
					<text class="recipient-label">收货人:</text>
					<u-icon name="map" size="16" color="#666" style="margin-top: 8rpx;"></u-icon>
				</view>
				<view class="no-address-right">
					<text class="no-address-text">添加收货地址</text>
					<u-icon name="arrow-right" size="14" color="#c8c9cc"></u-icon>
				</view>
			</view>
		</view>

		<!-- 商品列表 -->
		<view v-for="store in storeList" :key="store.id" class="store-group">
			<!-- 店铺头部 -->
			<view class="store-header">
				<view class="store-info">
					<image :src="serverAddress + 'img/icon-dianpu@2x.png'" class="store-logo"></image>
					<text class="store-name">{{ store.name }}</text>
				</view>
				<u-icon name="arrow-right" size="14" color="#999"></u-icon>
			</view>

			<!-- 商品列表 -->
			<view v-for="item in store.goods" :key="item.id" class="goods-item">
				<!-- 左侧固定层 -->
				<view class="item-left-layer">
					<view class="item-photo" @click="goToProduct(item.id)">
						<image :src="getImageUrl(item.image)" class="goods-image"></image>
					</view>
				</view>

				<!-- 右侧内容区域 -->
				<view class="item-right-content">
					<view class="item-content">
						<view class="item-info">
							<text class="goods-title" @click="goToProduct(item.id)">{{ item.name }}</text>
							<view class="goods-spec">
								<text class="spec-text">{{ item.spec }}</text>
							</view>
						</view>

						<view class="item-action">
							<view class="price-quantity-info">
								<text class="current-price">¥ {{ item.price }}</text>
								<text class="profit-text">分润: ¥{{ item.profit }}</text>
								<text class="qty">×{{ item.quantity }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 店铺分润 -->
			<view class="store-profit">
				<text class="profit-text">分润:¥{{ store.totalProfit }}</text>
			</view>
		</view>

		<!-- 订单详情 -->
		<view class="card-container">
			<!-- 发票 -->
			<view class="cell-item clickable" @click="handleInvoice">
				<text class="cell-title">发票</text>
				<view class="cell-right">
					<text class="cell-value invoice-value">{{ invoiceState === 1 && invoiceText ? invoiceText : '添加发票信息' }}</text>
					<u-icon name="arrow-right" size="14" color="#c8c9cc"></u-icon>
				</view>
			</view>

			<!-- <u-divider margin="30rpx 0 0"></u-divider> -->

			<!-- 价格明细 -->
			<view class="price-breakdown">
				<view class="cell-item">
					<text class="cell-title">共{{ totalCount }}件商品</text>
				</view>
				<view class="cell-item">
					<text class="cell-title">运费(快递)</text>
					<text class="cell-value">¥{{ expressFee }}</text>
				</view>
				<view class="cell-item">
					<text class="cell-title">发票费用(自费)</text>
					<text class="cell-value">¥{{ invoiceFee }}</text>
				</view>
				<!-- <view class="cell-item">
					<text class="cell-title">商品金额</text>
					<text class="cell-value">¥{{ goodsAmount }}</text>
				</view> -->
			</view>
		</view>

		<!-- 底部栏 -->
		<view class="bottom-bar">
			<view class="total-info">
				<text class="count-profit">共 {{ totalCount }}件 分润 : ¥{{ totalProfit }}</text>
				<text class="total-amount">实付款: ¥{{ totalAmount }}</text>
			</view>
			<u-button type="primary" :loading="loading" :disabled="loading" @click="submitOrder"
				custom-style="width: 200rpx; height: 70rpx; border-radius: 35rpx; background-color: #FF8033; border-color: #FF8033;">
				提交订单
			</u-button>
		</view>

		<!-- 支付方式弹窗 -->
		<u-popup v-model:show="showPayModal" mode="bottom" border-radius="20" :safe-area-inset-bottom="true">
			<view class="pay-content">
				<view class="pay-header">
					<text class="pay-title">确认付款</text>
					<u-icon name="close" size="20" color="#999" @click="closePayModal"></u-icon>
				</view>

				<view class="pay-amount">¥{{ totalAmount }}</view>

				<view class="pay-methods">
					<view class="cell-item clickable" @click="showPasswordInput">
						<view class="cell-left">
							<u-icon name="rmb-circle" size="20" color="#27B387" style="margin-right: 15rpx;"></u-icon>
							<text class="cell-title">账户余额</text>
						</view>
						<text class="cell-value">¥{{ userBalance }}</text>
					</view>

					<view class="cell-item clickable" @click="payWithWechat">
						<view class="cell-left">
							<u-icon name="weixin-circle-fill" size="20" color="#1AAD19" style="margin-right: 15rpx;"></u-icon>
							<text class="cell-title">微信支付</text>
						</view>
						<u-icon name="arrow-right" size="14" color="#c8c9cc"></u-icon>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 支付密码输入弹窗 -->
		<u-popup v-model:show="showPasswordModal" mode="center" width="600rpx" border-radius="20">
			<view class="password-content">
				<view class="password-header">
					<text class="password-title">{{ passwordTitle }}</text>
				</view>

				<text class="password-tip">{{ passwordTip }}</text>

				<!-- 密码输入框 -->
				<u-code-input v-model="payPassword" :maxlength="6" :dot="true" :focus="showPasswordModal"
					@finish="handlePasswordInput"></u-code-input>

				<view class="password-actions">
					<u-button type="info" plain @click="hidePasswordInput" custom-style="margin-right: 20rpx;">
						取消
					</u-button>
					<u-button type="primary" :disabled="payPassword.length < 6" @click="handlePasswordInput">
						确认
					</u-button>
				</view>
			</view>
		</u-popup>

		<!-- Loading -->
		<u-loading-page :loading="pageLoading" loading-text="加载中..."></u-loading-page>
	</view>
</template>

<script>
	import api from '@/api/index.js'
	import {
		inject
	} from 'vue'
	export default {
		data() {
		return {
			baseUrl: inject('$baseUrl'),
			serverAddress: inject('$serverAddress'),
			// 小程序适配相关
			statusBarHeight: 0,
			navBarHeight: 44,
			menuButtonInfo: {},
			windowWidth: 375,
			// 地址相关
			selectedAddress: null,

			// 商品和店铺数据
			storeList: [],
			orderData: null,

			// 订单详情
			invoiceText: '不支持开发票',
			invoiceState: 0,
			expressFee: '0.00',
			invoiceFee: '0.00',
			goodsAmount: '0.00',
			totalCount: 0,
			totalProfit: '0.00',
			totalAmount: '0.00',

			// 支付相关
			showPayModal: false,
			showPasswordModal: false,
			userBalance: '0.00',
			payPassword: '',
			passwordTitle: '检验支付密码',
			passwordTip: '请输入支付密码',
			isSettingPassword: false,
			firstPassword: '',
			orderNum: '',
			openid: '',

			// 加载状态
			loading: false,
			pageLoading: false
		}
		},

		onLoad(options) {
			// 初始化小程序适配
			this.initMiniProgramAdapt()
			
			// 获取URL参数
			this.spec_id = options.spec_id
			this.count = options.count
			this.source = options.source
			this.select = options.select
			this.from = options.from
		
			console.log('订单确认页面参数:', {
				spec_id: this.spec_id,
				count: this.count,
				source: this.source,
				select: this.select,
				from: this.from
			})

			// 统一调用接口加载订单数据，确保数据是最新的
			this.loadOrderData()

			// 处理从地址管理页面返回的情况
			if (this.from === 'menag_addres') {
				const addInfo = uni.getStorageSync('addNeedEdit')
				if (addInfo) {
					this.selectedAddress = {
						id: addInfo.id,
						name: addInfo.name,
						phone: addInfo.tel,
						detail: `${addInfo.loid} ${addInfo.adds}`
					}
				}
			}
		},

		onShow() {
			// 检查是否有选择的地址
			const selectedAddr = uni.getStorageSync('selectedAddress')
			if (selectedAddr) {
				this.selectedAddress = selectedAddr
				uni.removeStorageSync('selectedAddress')
			}

			// 检查发票信息
			const invoiceInfo = uni.getStorageSync('invoiceInfo')
			if (invoiceInfo && invoiceInfo.invoiceTitle) {
				this.invoiceText = invoiceInfo.invoiceTitle
				this.invoiceState = 1
			} else {
				// 兼容旧的发票信息格式
				const taxpaper = uni.getStorageSync('taxpapper')
				if (taxpaper) {
					this.invoiceText = taxpaper.name
					this.invoiceState = 1
				}
			}
		},

		methods: {
			// 小程序适配初始化
			initMiniProgramAdapt() {
				// 获取系统信息
				const systemInfo = uni.getSystemInfoSync()
				this.statusBarHeight = systemInfo.statusBarHeight || 0
				this.windowWidth = systemInfo.windowWidth || 375

				// 获取胶囊按钮信息（仅小程序）
				// #ifdef MP
				try {
					this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() || {
						width: 87,
						height: 32,
						top: this.statusBarHeight + 6,
						right: 7,
						bottom: this.statusBarHeight + 38,
						left: this.windowWidth - 94
					}
					this.navBarHeight = this.menuButtonInfo.height + (this.menuButtonInfo.top - this.statusBarHeight) * 2
				} catch (e) {
					console.error('获取胶囊按钮信息失败:', e)
					this.menuButtonInfo = {
						width: 87,
						height: 32,
						top: this.statusBarHeight + 6,
						right: 7,
						bottom: this.statusBarHeight + 38,
						left: this.windowWidth - 94
					}
					this.navBarHeight = 44
				}
				// #endif

				// #ifndef MP
				this.menuButtonInfo = {
					width: 0,
					height: 0,
					top: 0,
					right: 0,
					bottom: 0,
					left: 0
				}
				// #endif
			},
			
			goBack() {
				const pages = getCurrentPages()
				if (pages.length > 1) {
					// 有上一页，返回上一页
					uni.navigateBack({
						fail: (err) => {
							console.error('返回失败:', err)
							// 如果返回失败，跳转到购物车页面
							uni.reLaunch({
								url: '/pages/cart/index'
							})
						}
					})
				} else {
					// 没有上一页，跳转到购物车页面
					uni.reLaunch({
						url: '/pages/cart/index'
					})
				}
			},

			// 加载订单数据
			async loadOrderData() {
				try {
					console.log('开始加载订单数据...')
					
					uni.showLoading({
						title: '加载中...'
					})

					const params = {
						spec_id: this.spec_id,
						count: this.count,
						source: this.source,
						select: this.select
					}
					
					console.log('调用订单预览接口，参数:', params)

					const result = await api.orderApi.getOrderPreview(params)
					
					console.log('订单预览接口返回:', result)

					uni.hideLoading()

					if (result.r === 0) {
						const data = result.data

						// 处理店铺和商品数据
						this.storeList = data.list.map(store => {
							const goods = store.goods.map(item => ({
								id: item.goods_id,
								name: item.goods_name,
								image: this.baseUrl + item.file_path,
								spec: item.goods_spec,
								price: parseFloat(item.sale_price),
								profit: parseFloat(item.huafan),
								quantity: parseInt(item.num)
							}))

							return {
								id: store.store_id || Date.now(),
								name: store.mfrname,
								goods: goods,
								totalProfit: parseFloat(store.huafan)
							}
						})

						// 设置订单总计信息
						this.totalCount = data.num
						this.totalProfit = parseFloat(data.huafan).toFixed(2)
						this.totalAmount = parseFloat(data.sale_price).toFixed(2)
						this.expressFee = parseFloat(data.express_money).toFixed(2)
						this.invoiceFee = parseFloat(data.invoice_money).toFixed(2)
						this.goodsAmount = parseFloat(data.sale_price).toFixed(2)
						this.invoiceState = data.invoice_state

						// 处理发票状态
						if (data.invoice_state === 1) {
							this.invoiceText = ''
						}

						// 处理地址信息
						if (!this.selectedAddress && data.user) {
							this.selectedAddress = {
								id: data.user.address_id || '',
								name: data.user.name || '',
								phone: data.user.telephone || '',
								detail: `${data.user.location || ''} ${data.user.address || ''}`
							}
						}

						// 获取用户余额
						this.getUserBalance()
					} else {
						uni.showToast({
							title: result.msg || '加载订单信息失败',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}
				} catch (error) {
					uni.hideLoading()
					console.error('加载订单数据失败:', error)
					uni.showToast({
						title: '网络异常，请重试',
						icon: 'none'
					})
				}
			},

			// 获取用户余额
			async getUserBalance() {
				try {
					const result = await api.paymentApi.getUserBalance()
					if (result.r === 0) {
						this.userBalance = parseFloat(result.data.money).toFixed(2)
					}
				} catch (error) {
					console.error('获取用户余额失败:', error)
				}
			},

			// 获取图片完整URL
			getImageUrl(path) {
				if (!path) return this.baseUrl + 'img/icon-dianpu@2x.png'
				if (path.startsWith('http')) return path
				if (path.startsWith('/static')) return this.baseUrl + path.substring(1)
				return this.baseUrl + path
			},

			goToProduct(goodsId) {
				uni.navigateTo({
					url: `/pages/goods/detail?id=${goodsId}`
				})
			},

			// 选择收货地址
			selectAddress() {
				// 使用 JSON 编码方式传递复杂参数对象
				const paramsObj = {
					from: 'confirmOrder',
					spec_id: this.spec_id,
					count: this.count,
					select: this.select,
					source: this.source
				}
				
				const params = `data=${encodeURIComponent(JSON.stringify(paramsObj))}`
				
				uni.navigateTo({
					url: `/pages/address/index?${params}`
				})
			},

			// 处理发票
			handleInvoice() {
				uni.navigateTo({
					url: '/pages/invoice/edit'
				})
			},

			// 提交订单
			async submitOrder() {
				if (!this.selectedAddress || !this.selectedAddress.id) {
					uni.showToast({
						title: '请添加收货地址！',
						icon: 'none'
					})
					return
				}

				if (this.loading) return

				try {
					this.loading = true
					uni.showLoading({
						title: '提交中...'
					})

					// 获取发票信息
					let taxStatus = 0
					let taxTitle = ''
					let taxNum = ''
					let userType = ''

					const taxpaper = uni.getStorageSync('taxpapper')
					if (taxpaper) {
						taxStatus = 1
						taxTitle = taxpaper.name
						taxNum = taxpaper.taxNum
						userType = taxpaper.type
					}

					const params = {
						spec_id: this.spec_id,
						count: this.count,
						source: this.source,
						select: this.select,
						invoice: taxStatus,
						title: taxTitle,
						tax_num: taxNum,
						texture: 1,
						user_type: userType,
						address_id: this.selectedAddress.id
					}

					const result = await api.orderApi.submitOrder(params)

					uni.hideLoading()
					this.loading = false

					if (result.r === 0) {
						this.orderNum = result.data.order_num
						this.databody = result.data.body
						
						
						if(uni.getStorageSync('openid')){
							this.openid = uni.getStorageSync('openid')
						}else{
							wx.login({
								success: async (loginRes) => {
									
									if (loginRes.code) {
										const openidResult = await api.wechatApi.getOpenidForMiniProgram({
										  code: loginRes.code
										})
										
									this.openid = openidResult.data.openid
									console.log('获取到code:', this.openid);
									// 显示支付方式选择
									} else {
										uni.showToast({
											title: '获取code失败',
											icon: 'none'
										});
									}
								},
								fail: (error) => {
									
									uni.showToast({
										title: '失败',
										icon: 'none'
									});
								}
							});
						}
						
						// wx.login({
						// 	success: async (loginRes) => {
								
						// 		if (loginRes.code) {
						// 			const openidResult = await api.wechatApi.getOpenidForMiniProgram({
						// 			  code: loginRes.code
						// 			})
									
						// 		this.openid = openidResult.data.openid
						// 		console.log('获取到code:', this.openid);
						// 		// 显示支付方式选择
								this.showPayModal = true
						// 		} else {
						// 			uni.showToast({
						// 				title: '获取code失败',
						// 				icon: 'none'
						// 			});
						// 		}
						// 	},
						// 	fail: (error) => {
								
						// 		uni.showToast({
						// 			title: '失败',
						// 			icon: 'none'
						// 		});
						// 	}
						// });
						
						uni.showToast({
							title: '订单已提交',
							icon: 'success'
						})
					} else {
						uni.showToast({
							title: result.msg || '订单提交失败',
							icon: 'none'
						})
					}
				} catch (error) {
					uni.hideLoading()
					this.loading = false
					console.error('提交订单失败:', error)
					uni.showToast({
						title: '网络异常，请重试',
						icon: 'none'
					})
				}
			},

			// 关闭支付弹窗
			closePayModal() {
				this.showPayModal = false
			},

			// 显示密码输入
			async showPasswordInput() {
				this.showPayModal = false
				this.showPasswordModal = true
				this.payPassword = ''

				// 检查是否已设置支付密码
				try {
					const result = await api.paymentApi.checkPayPassword()
					if (result.r === 0) {
						if (result.data.is_set === 1) {
							this.passwordTitle = '检验支付密码'
							this.passwordTip = '请输入支付密码'
							this.isSettingPassword = false
						} else {
							this.passwordTitle = '设置支付密码'
							this.passwordTip = '设置支付密码'
							this.isSettingPassword = true
						}
					}
				} catch (error) {
					console.error('检查支付密码状态失败:', error)
				}
			},

			// 隐藏密码输入
			hidePasswordInput() {
				this.showPasswordModal = false
				this.showPayModal = true
				this.payPassword = ''
				this.firstPassword = ''
			},

			// 处理密码输入
			async handlePasswordInput() {
				if (this.payPassword.length < 6) return

				// 验证是否为6位数字
				if (!/^\d{6}$/.test(this.payPassword)) {
					uni.showToast({
						title: '支付密码由六位数字组成',
						icon: 'none'
					})
					this.payPassword = ''
					return
				}

				if (this.isSettingPassword) {
					// 设置支付密码流程
					if (!this.firstPassword) {
						this.firstPassword = this.payPassword
						this.payPassword = ''
						this.passwordTip = '请再次输入支付密码'
					} else {
						if (this.payPassword !== this.firstPassword) {
							uni.showToast({
								title: '两次密码输入不一致',
								icon: 'none'
							})
							this.payPassword = ''
							return
						}

						// 调用设置密码接口
						try {
							const result = await api.paymentApi.setPayPassword({
								pay_pwd: this.md5(this.firstPassword),
								pay_confirm_pwd: this.md5(this.payPassword)
							})

							if (result.r === 0) {
								uni.showToast({
									title: '支付密码设置成功',
									icon: 'success'
								})
								this.isSettingPassword = false
								this.passwordTitle = '检验支付密码'
								this.passwordTip = '请输入支付密码'
								this.payPassword = ''
								this.firstPassword = ''
							} else {
								uni.showToast({
									title: result.msg || '设置失败',
									icon: 'none'
								})
								this.payPassword = ''
							}
						} catch (error) {
							console.error('设置支付密码失败:', error)
							uni.showToast({
								title: '网络异常，请重试',
								icon: 'none'
							})
							this.payPassword = ''
						}
					}
				} else {
					// 验证支付密码
					try {
						const verifyResult = await api.paymentApi.verifyPayPassword({
							pay_pwd: this.md5(this.payPassword)
						})

						if (verifyResult.r === 0) {
							// 密码验证成功，执行余额支付
							await this.balancePay()
						} else {
							uni.showToast({
								title: verifyResult.msg || '密码错误',
								icon: 'none'
							})
							this.payPassword = ''
						}
					} catch (error) {
						console.error('验证支付密码失败:', error)
						uni.showToast({
							title: '网络异常，请重试',
							icon: 'none'
						})
						this.payPassword = ''
					}
				}
			},

			// 余额支付
			async balancePay() {
				try {
					const froms = (this.source && this.source != 2) ? 2 : 1

					const result = await api.paymentApi.balancePay({
						order_num: this.orderNum,
						type: 2,
						is_father_order: froms,
						num: this.count
					})

					if (result.r === 0) {
						this.showPasswordModal = false
						uni.showToast({
							title: '支付成功',
							icon: 'success'
						})

						setTimeout(() => {
							uni.redirectTo({
								url: `/pages/order/paySuccess?type=余额支付&totalMoney=${this.totalAmount}`
							})
						}, 1000)
					} else {
						uni.showToast({
							title: result.msg || '支付失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('余额支付失败:', error)
					uni.showToast({
						title: '网络异常，请重试',
						icon: 'none'
					})
				}
			},

			// 微信支付
			async payWithWechat() {
				this.showPayModal = false

				try {
					uni.showLoading({
						title: '正在调起支付...'
					})
					

					this.openid = uni.getStorageSync('openid') 
					const froms = (this.source && this.source != 2) ? 2 : 1
console.log('=====orderNum========',this.orderNum)
					const result = await api.paymentApi.wechatPay({
						order_num: this.orderNum,
						source: 5,
						type: 2,
						is_father_order: froms,
						openid: this.openid
					})

					uni.hideLoading()

					if (result.r === 0) {
						const payData = result.data

						// 调用微信支付
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: String(payData.timeStamp),
							nonceStr: payData.nonceStr,
							package: payData.package,
							signType: payData.signType,
							paySign: payData.paySign,
							success: () => {
								uni.showToast({
									title: '支付成功',
									icon: 'success'
								})
								setTimeout(() => {
									uni.redirectTo({
										url: `/pages/order/paySuccess?type=微信支付&totalMoney=${this.totalAmount}`
									})
								}, 1000)
							},
							fail: (err) => {
								console.error('微信支付失败:', err)
								uni.showToast({
									title: '支付失败',
									icon: 'none'
								})
							}
						})
					} else {
						uni.showToast({
							title: result.msg || '支付失败',
							icon: 'none'
						})
					}
				} catch (error) {
					uni.hideLoading()
					console.error('微信支付失败:', error)
					uni.showToast({
						title: '网络异常，请重试',
						icon: 'none'
					})
				}
			},

			// MD5加密
			md5(str) {
				// 这里需要引入MD5库或使用crypto-js
				// 简化处理，实际项目中应该使用专门的MD5库
				return str // 临时返回原字符串，实际应该返回MD5值
			}
		}
	}
</script>

<style lang="scss" scoped>
	.confirm-container {
		background-color: #f8f8f8;
		min-height: 100vh;
		padding-top: calc(var(--status-bar-height, 0px) + 44px);
		padding-bottom: 120rpx;
	}

	/* 自定义导航栏样式 */
	.custom-navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background: linear-gradient(135deg, #FF8033 0%, #FF6B35 100%);
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);

		.navbar-content {
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			position: relative;
			height: 100%;

			.back-btn {
				width: 64rpx;
				height: 64rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20rpx;
				position: relative;
				z-index: 10;
				cursor: pointer;
			}

			.navbar-title {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				width: 100%;
				pointer-events: none;

				.title-text {
					color: #fff;
					font-size: 40rpx;
					font-weight: 600;
					letter-spacing: 1rpx;
					pointer-events: auto;
				}
			}
		}
	}

	/* 卡片容器样式 - 替代 u-card */
	.card-container {
		background-color: #fff;
		margin: 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
		overflow: hidden;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
	}

	/* 商品卡片容器特殊处理 */
	.card-container:has(.store-header) {
		padding: 0;
	}

	/* 地址样式 */
	.address-info {
		cursor: pointer;
		padding: 24rpx 30rpx;
	}

	.address-user {
		display: flex;
		align-items: center;
		margin-bottom: 12rpx;
		font-size: 28rpx;
	}

	.name {
		color: #333;
		font-weight: 500;
		margin-right: 30rpx;
		margin-left: 10rpx;
	}

	.phone {
		color: #666;
		font-size: 26rpx;
	}

	.address-detail {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
	}

	.detail {
		flex: 1;
		color: #666;
		line-height: 1.5;
	}

	.no-address {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding: 24rpx 30rpx;
		cursor: pointer;
	}

	.no-address-left {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.recipient-label {
		color: #666;
		font-size: 28rpx;
		margin-bottom: 8rpx;
	}

	.no-address-right {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.no-address-text {
		color: #FF8033;
		font-size: 28rpx;
	}


	/* 店铺分组样式 */
	.store-group {
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.store-header {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #f5f5f5;

		.store-info {
			display: flex;
			align-items: center;
			flex: 1;

			.store-logo,
			.store-logo-default {
				width: 60rpx;
				height: 60rpx;
				border-radius: 8rpx;
				margin-right: 24rpx;
				flex-shrink: 0;
			}

			.store-name {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
			}
		}
	}

	/* 商品样式 */
	.goods-item {
		display: flex;
		border-bottom: 1px solid #f5f5f5;
		min-height: 200rpx;
		background-color: #fff;
		align-items: flex-start;

		// 左侧固定层
		.item-left-layer {
			width: 180rpx;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			padding: 30rpx 0 30rpx 30rpx;
			background-color: #fff;

			.item-photo {
				width: 160rpx;
				position: relative;

				.goods-image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 8rpx;
					object-fit: cover;
				}
			}
		}

		// 右侧内容区域
		.item-right-content {
			flex: 1;
			min-width: 0;
			padding: 30rpx 30rpx 30rpx 20rpx;
			background-color: #fff;

			.item-content {
				height: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: flex-start;
				min-height: 140rpx;

				.item-info {
					flex: 1;
					min-width: 0;
					margin-right: 20rpx;

					.goods-title {
						font-size: 28rpx;
						color: #333;
						font-weight: bold;
						line-height: 1.4;
						word-wrap: break-word;
						word-break: break-all;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						margin-bottom: 8rpx;
					}

					.goods-spec {
						display: flex;
						align-items: flex-start;
						justify-content: flex-start;
						margin-bottom: 0;
						flex-wrap: wrap;

						.spec-text {
							font-size: 26rpx;
							color: #9c9c9c;
							word-wrap: break-word;
							word-break: break-all;
							line-height: 1.3;
						}
					}
				}

				.item-action {
					display: flex;
					justify-content: flex-end;
					align-items: flex-start;
					flex-shrink: 0;

					.price-quantity-info {
						display: flex;
						flex-direction: column;
						align-items: flex-end;
						gap: 8rpx;

						.current-price {
							font-size: 32rpx;
							color: #FF8033;
							font-weight: 600;
							white-space: nowrap;
							line-height: 1.2;
						}

						.profit-text {
							font-size: 28rpx;
							color: #FF8033;
							white-space: nowrap;
							line-height: 1.2;
						}

						.qty {
							font-size: 28rpx;
							color: #FF8033;
							white-space: nowrap;
							line-height: 1.2;
						}
					}
				}
			}
		}
	}

	.store-profit {
		padding: 20rpx 30rpx;
		text-align: right;
		background-color: #fff;
		border-top: 1rpx solid #f5f5f5;

		.profit-text {
			font-size: 26rpx;
			color: #FF8033;
			font-weight: 500;
			border: 1rpx solid #FF8033;
			padding: 4rpx 12rpx;
			border-radius: 4rpx;
			display: inline-block;
		}
	}

	/* 单元格样式 - 替代 u-cell */
	.cell-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 0;
		min-height: 48rpx;
		border-bottom: 1rpx solid #ebedf0;
		transition: background-color 0.2s ease;
	}

	.cell-item:last-child {
		border-bottom: none;
	}

	.cell-item.clickable {
		cursor: pointer;
	}

	.cell-item.clickable:active {
		background-color: #f2f3f5;
	}

	.cell-left {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.cell-right {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.cell-title {
		font-size: 28rpx;
		color: #323233;
		line-height: 1.2;
	}

	.cell-value {
		font-size: 26rpx;
		color: #969799;
		line-height: 1.2;
	}

	.invoice-value {
		color: #FF8033;
	}


	/* 底部栏样式 */
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		border-top: 1rpx solid #e5e5e5;
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		z-index: 100;
	}

	.total-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.count-profit {
		font-size: 24rpx;
		color: #FF8033;
		margin-bottom: 5rpx;
	}

	.total-amount {
		font-size: 30rpx;
		color: #ff6b6b;
		font-weight: bold;
	}

	/* 支付弹窗样式 */
	.pay-content {
		padding: 40rpx 30rpx;
	}

	.pay-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.pay-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.pay-amount {
		font-size: 48rpx;
		font-weight: bold;
		color: #ff6b6b;
		text-align: center;
		margin-bottom: 40rpx;
	}

	.pay-methods {
		margin-top: 20rpx;
	}

	/* 支付密码输入样式 */
	.password-content {
		padding: 40rpx 30rpx;
		text-align: center;
	}

	.password-header {
		margin-bottom: 30rpx;
	}

	.password-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.password-tip {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 40rpx;
		text-align: center;
	}

	.password-actions {
		display: flex;
		justify-content: center;
		margin-top: 40rpx;
		gap: 20rpx;
	}

	/* 响应式适配 */
	@media screen and (max-width: 750rpx) {
		.goods-item {
			padding: 20rpx;
		}

		.goods-name {
			font-size: 26rpx;
		}

		.price {
			font-size: 28rpx;
		}

		.store-header {
			padding: 20rpx;
		}
	}

	/* 动画效果 */
	.address-info,
	.goods-item,
	.store-header {
		transition: background-color 0.2s ease;
	}

	.address-info:active,
	.goods-item:active,
	.store-header:active {
		background-color: #f5f5f5;
	}

	/* 卡片阴影效果 */
	:deep(.u-card) {
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	/* 自定义按钮样式 */
	:deep(.u-button--primary) {
		background-color: #FF8033 !important;
		background: #FF8033 !important;
		border-color: #FF8033 !important;
	}

	/* 自定义弹窗样式 */
	:deep(.u-popup) {
		border-radius: 20rpx;
	}

	/* 自定义导航栏样式 */
	:deep(.u-navbar) {
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	/* 系统导航栏标题样式 */
	:deep(.uni-navbar__header) {
		font-size: 42rpx !important;
		font-weight: 600 !important;
	}

	:deep(.uni-navbar__header-text) {
		font-size: 42rpx !important;
		font-weight: 600 !important;
	}

	/* 小程序导航栏标题样式 */
	/* #ifdef MP */
	:deep(.uni-page-head__title) {
		font-size: 42rpx !important;
		font-weight: 600 !important;
	}
	/* #endif */

	/* H5导航栏标题样式 */
	/* #ifdef H5 */
	:deep(.uni-navbar__header) {
		font-size: 42rpx !important;
		font-weight: 600 !important;
	}
	/* #endif */

	/* 自定义分割线样式 */
	:deep(.u-divider__text) {
		font-size: 24rpx;
		color: #999;
	}

	/* 自定义单元格样式 */
	:deep(.u-cell__title) {
		font-size: 28rpx;
		color: #333;
	}

	:deep(.u-cell__value) {
		font-size: 26rpx;
		color: #666;
	}

	/* 自定义验证码输入框样式 */
	:deep(.u-code-input) {
		margin: 40rpx 0;
	}

	:deep(.u-code-input__item) {
		border: 2rpx solid #e5e5e5;
		border-radius: 10rpx;
		background-color: #fafafa;
	}

	:deep(.u-code-input__item--focus) {
		border-color: #27B387;
		background-color: #fff;
	}
</style>